TypeScript์ ํ์ ์์คํ ์ ํ์ฉํ์ฌ ์ ์ธ๊ณ์ ์ผ๋ก ๊ฒฌ๊ณ ํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ๋ฉฐ ์ค๋ฅ ์๋ ์ํํธ์จ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๊ฐ๋ ฅํ ๋ก์ง ์์ง์ ํ๊ตฌํฉ๋๋ค.
TypeScript์ ๋ก์ง ์์คํ : ๊ฒฌ๊ณ ํ ๊ธ๋ก๋ฒ ์ํํธ์จ์ด๋ฅผ ์ํ ํ์ ๊ตฌํ ์ฌ์ธต ๋ถ์
๊ด๋ํ๊ณ ์ํธ ์ฐ๊ฒฐ๋ ํ๋ ์ํํธ์จ์ด ๊ฐ๋ฐ ํ๊ฒฝ์์, ๊ธฐ๋ฅ์ ์ผ ๋ฟ๋ง ์๋๋ผ ๋ค์ํ ํ๊ณผ ์ง๋ฆฌ์ ๊ฒฝ๊ณ๋ฅผ ๋์ด ๋ณต์๋ ฅ ์๊ณ ํ์ฅ ๊ฐ๋ฅํ๋ฉฐ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๊ฒ์ด ๋ฌด์๋ณด๋ค ์ค์ํฉ๋๋ค. ์ํํธ์จ์ด ํ๋ก์ ํธ๊ฐ ๋ณต์ก์ฑ๊ณผ ๋ฒ์ ๋ฉด์์ ์ฑ์ฅํจ์ ๋ฐ๋ผ, ๋ณต์กํ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ๊ด๋ฆฌํ๊ณ , ์ผ๊ด์ฑ์ ๋ณด์ฅํ๋ฉฐ, ๋ฏธ๋ฌํ ๋ฒ๊ทธ๋ฅผ ๋ฐฉ์งํ๋ ๋์ ์ ์ ์ ๋ ์ด๋ ค์์ง๋๋ค. ๋ฐ๋ก ์ด ์ง์ ์์ TypeScript๊ฐ ์ ๊ณตํ๋ ๊ฒ๊ณผ ๊ฐ์ ๊ฒฌ๊ณ ํ ํ์ ์์คํ ์ด ํ์์ ์ธ ๋๊ตฌ๋ก ๋ฑ์ฅํ๋ฉฐ, ๊ฐ๋ฐ์๊ฐ ์ฝ๋ ๊ตฌ์ฑ ๋ฐ ์ ํจ์ฑ ๊ฒ์ฌ์ ์ ๊ทผํ๋ ๋ฐฉ์์ ๊ทผ๋ณธ์ ์ผ๋ก ๋ณํ์ํต๋๋ค.
JavaScript์ ์์ ์งํฉ์ธ TypeScript๋ ์ ์ ํ์ ์ ์๋ก ์ธ์ด๋ฅผ ํ์ฅํ์ฌ ๊ฐ๋ฐ์๊ฐ ๋ฐ์ดํฐ์ ํํ์ ํจ์ ๊ฐ์ ๊ณ์ฝ์ ๊ธฐ์ ํ ์ ์๋๋ก ํฉ๋๋ค. ๊ทธ๋ฌ๋ TypeScript์ ํ์ ์์คํ ์ ๋จ์ํ JavaScript์ ํ์ ์ ์ถ๊ฐํ๋ ๋ฉ์ปค๋์ฆ์ผ๋ก ๋ณด๋ ๊ฒ์ ์ง๋์น ๋จ์ํ์ ๋๋ค. ๋ณธ์ง์ ์ผ๋ก TypeScript๋ ์ ๊ตํ ๋ก์ง ์์คํ ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ๊ฐ๋ฐ์๊ฐ ์ฝ๋ ๋ด์์ ๋ณต์กํ ์ ์ฝ ์กฐ๊ฑด๊ณผ ๊ด๊ณ๋ฅผ ์ธ์ฝ๋ฉํ ์ ์๋๋ก ํ๋ ๊ฐ๋ ฅํ ์ปดํ์ผ ํ์ ์ถ๋ก ์์ง์ ๋๋ค. ์ด ๋ก์ง ์์คํ ์ ๋จ์ํ ํ์ ์ ํ์ธํ๋ ๊ฒ์ ๋์ด, ํ์ ์ ์ถ๋ก ํ๊ณ , ๋ณํํ๋ฉฐ, ๊ถ๊ทน์ ์ผ๋ก ๋ฐํ์์ ๋จ ํ ์ค์ ์ฝ๋๊ฐ ์คํ๋๊ธฐ ์ ์ ์ ํ๋ฆฌ์ผ์ด์ ์ํคํ ์ฒ์ ์ ์ธ์ ์ฒญ์ฌ์ง์ ๊ตฌ์ถํ๋ ๋ฐ ๋์์ ์ค๋๋ค.
์ํํธ์จ์ด ์์ง๋์ด, ์ํคํ ํธ, ํ๋ก์ ํธ ๊ด๋ฆฌ์๋ก ๊ตฌ์ฑ๋ ์ ์ธ๊ณ ๋ ์๋ค์๊ฒ ์ด ๊ทผ๋ณธ์ ์ธ ์ฒ ํ๊ณผ TypeScript ํ์ ๋ก์ง์ ์ค์ ๊ตฌํ์ ์ดํดํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด๋ ํ๋ก์ ํธ ์์ ์ฑ, ๊ฐ๋ฐ ์๋, ๊ทธ๋ฆฌ๊ณ ๋ค์ํ ๊ตญ์ ํ์ด ํ์ ์ด ์๊ฑฐ๋ ์ฝํ๊ฒ ํ์ ์ด ์ง์ ๋ ์ธ์ด์ ๊ด๋ จ๋ ์ผ๋ฐ์ ์ธ ํจ์ ์ ๋น ์ง์ง ์๊ณ ๋๊ท๋ชจ ํ๋ก์ ํธ์์ ํ์ ํ ์ ์๋ ์ฉ์ด์ฑ์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ์ด ํฌ๊ด์ ์ธ ๊ฐ์ด๋๋ TypeScript ํ์ ๊ตฌํ์ ๋ณต์กํ ์ธ๋ถ ์ฌํญ์ ํํค์ณ ํต์ฌ ์์น, ๊ณ ๊ธ ๊ธฐ๋ฅ, ๊ทธ๋ฆฌ๊ณ ์ง์ ์ผ๋ก ๊ธ๋ก๋ฒํ ์ฌ์ฉ์๋ฅผ ์ํ ๊ฒฌ๊ณ ํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ํํธ์จ์ด๋ฅผ ๋ง๋๋ ๋ฐ ๋ฏธ์น๋ ์ฌ์คํ ์ํฅ์ ํ๊ตฌํ ๊ฒ์ ๋๋ค.
TypeScript์ ํต์ฌ ํ์ ์ฒ ํ ์ดํด
TypeScript์ ์ค๊ณ ์ฒ ํ์ ํ์ ์์ ์ฑ๊ณผ ๊ฐ๋ฐ์ ์์ฐ์ฑ ์ฌ์ด์ ์ค์ฉ์ ์ธ ๊ท ํ์ ๋ง์ถ๋ ๋ฐ ๊ธฐ๋ฐ์ ๋๊ณ ์์ต๋๋ค. ์ํ์ ๊ฑด์ ์ฑ์ ์ต์ฐ์ ์ผ๋ก ํ๋ ์ผ๋ถ ํ์ ์ ์ธ ํ์ ์์คํ ๊ณผ ๋ฌ๋ฆฌ, TypeScript๋ ์ต์ํ์ ๋ง์ฐฐ๋ก ๊ฐ๋ฐ์๊ฐ ๋ ๋์ ์ฝ๋๋ฅผ ์์ฑํ ์ ์๋๋ก ๋๋ ๋งค์ฐ ํจ๊ณผ์ ์ธ ๋๊ตฌ๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ ๋ชฉํ๋ก ํฉ๋๋ค.
"๊ฑด์ ์ฑ(Soundness)" ๋ ผ์๊ณผ ์ค์ฉ์ฑ
์๋ฒฝํ๊ฒ "๊ฑด์ ํ(sound)" ํ์
์์คํ
์ ์ฌ๋ฐ๋ฅธ ํ์
์ฃผ์์ด ์ฃผ์ด์ง ๊ฒฝ์ฐ ๋ฐํ์์ ํ์
์ค๋ฅ๊ฐ ์ ํ ๋ฐ์ํ์ง ์์์ ๋ณด์ฅํฉ๋๋ค. TypeScript๋ ๊ฐ๋ ฅํ ํ์
๊ฒ์ฌ๋ฅผ ์งํฅํ์ง๋ง, JavaScript์ ๋์ ์ธ ํน์ฑ๊ณผ ์ธ๋ถ์ ํ์
์๋ ์ฝ๋์์ ํตํฉ ํ์ค์ ์ธ์ ํฉ๋๋ค. Features like the any type, while often discouraged, provide an an escape hatch, allowing developers to gradually introduce types without being blocked by legacy code or third-party libraries. This pragmatism is key to its widespread adoption across diverse development environments, from small startups to multinational enterprises, where incremental adoption and interoperability are vital.
๊ตฌ์กฐ์ ํ์ดํ: "ํํ ๊ธฐ๋ฐ" ๋ก์ง
TypeScript ํ์ ์์คํ ์ ๊ฐ์ฅ ๋๋๋ฌ์ง ํน์ง ์ค ํ๋๋ ๊ตฌ์กฐ์ ํ์ดํ(์ผ๋ช "๋ ํ์ดํ")์ ์์กดํ๋ค๋ ๊ฒ์ ๋๋ค. ์ด๋ ๋ ํ์ ์ ํธํ์ฑ ์ฌ๋ถ๊ฐ ๋ช ์์ ์ธ ์ ์ธ์ด๋ ์์ ๊ณ์ธต(๋ช ๋ชฉ์ ํ์ดํ)์ด ์๋, ๋ฉค๋ฒ(์ฆ, "๊ตฌ์กฐ")์ ์ํด ๊ฒฐ์ ๋๋ค๋ ์๋ฏธ์ ๋๋ค. ์ด๋ค ํ์ ์ด ๋ค๋ฅธ ํ์ ์ ํ์ ์์ฑ์ ๋ชจ๋ ๊ฐ์ง๊ณ ์๋ค๋ฉด, ๊ทธ ์ด๋ฆ์ด๋ ์ถ์ฒ์ ๊ด๊ณ์์ด ํธํ๋๋ ๊ฒ์ผ๋ก ๊ฐ์ฃผ๋ฉ๋๋ค.
๋ค์ ์์๋ฅผ ์ดํด๋ณด์ญ์์ค:
interface Point2D {
x: number;
y: number;
}
interface Point3D {
x: number;
y: number;
z: number;
}
let p2d: Point2D = { x: 10, y: 20 };
let p3d: Point3D = { x: 10, y: 20, z: 30 };
// p3d๋ Point2D์ ๋ชจ๋ ์์ฑ์ ๊ฐ์ง๊ณ ์์ผ๋ฏ๋ก p2d์ ํ ๋น ๊ฐ๋ฅํฉ๋๋ค.
p2d = p3d; // TypeScript์์ ์๋ฒฝํ๊ฒ ์ ํจํฉ๋๋ค.
// p2d๋ 'z' ์์ฑ์ด ์์ผ๋ฏ๋ก p3d์ ํ ๋นํ ์ ์์ต๋๋ค.
// p3d = p2d; // ์ค๋ฅ: ํ์
'Point2D'์ 'z' ์์ฑ์ด ์์ต๋๋ค.
์ด ๊ตฌ์กฐ์ ์ ๊ทผ ๋ฐฉ์์ ๊ธ๋ก๋ฒ ํ์ ๋ฐ API ์ค๊ณ์ ์์ด ๋งค์ฐ ๊ฐ๋ ฅํฉ๋๋ค. ์ด๋ ์๋ก ๋ค๋ฅธ ํ์ด๋ ์ฌ์ง์ด ๋ค๋ฅธ ์กฐ์ง์ด ๊ณตํต ๋ฒ ์ด์ค ํด๋์ค ๋๋ ์ธํฐํ์ด์ค ์ด๋ฆ์ ๋์ํ ํ์ ์์ด ํธํ ๊ฐ๋ฅํ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์์ฑํ ์ ์๋๋ก ํฉ๋๋ค. ๋์จํ ๊ฒฐํฉ์ ์ด์งํ๊ณ , ์์๋๋ ๋ฐ์ดํฐ ํํ๋ฅผ ์ค์ํ๋ ํ ๋ค์ํ ์ง์ญ์ด๋ ๋ถ์์์ ๋ ๋ฆฝ์ ์ผ๋ก ๊ฐ๋ฐ๋ ๊ตฌ์ฑ ์์๋ฅผ ๋ ์ฝ๊ฒ ํตํฉํ ์ ์๊ฒ ํฉ๋๋ค.
ํ์ ์ถ๋ก : ๊ฐ๊ฒฐํ ์ฝ๋๋ฅผ ์ํ ์ค๋งํธํ ์ถ๋ก
TypeScript ์ปดํ์ผ๋ฌ๋ ํ์ ์ ์ถ๋ก ํ๋ ๋ฐ ์์ด ๋๋๋๋ก ์ง๋ฅ์ ์ ๋๋ค. ํ์ ์ถ๋ก ์ ํตํด ๊ฐ๋ฐ์๋ ๋ช ์์ ์ธ ํ์ ์ฃผ์์ ๋ ์์ฑํ ์ ์์ต๋๋ค. ์ปดํ์ผ๋ฌ๋ ๋ณ์, ํจ์ ๋ฐํ ๋๋ ํํ์์ ํ์ ์ ์ด๊ธฐํ๋ ์ฌ์ฉ๋ฒ์ ๊ธฐ๋ฐ์ผ๋ก ์ข ์ข ํ์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ด๋ ์์ฉ๊ตฌ ์ฝ๋๋ฅผ ์ค์ด๊ณ ์ฝ๋๋ฅผ ๊ฐ๊ฒฐํ๊ฒ ์ ์ง์์ผ์ฃผ๋ฉฐ, ๋ค์ํ ์ ํธ๋๋ฅผ ๊ฐ์ง๊ฑฐ๋ ์ฅํฉํ ํ์ดํ์ด ๋ ์ผ๋ฐ์ ์ธ ๋ฐฐ๊ฒฝ์ ๊ฐ์ง ๊ฐ๋ฐ์๋ค๊ณผ ์์ ํ ๋ ํฐ ์ด์ ์ ๋๋ค.
์๋ฅผ ๋ค์ด:
let greeting = "Hello, world!"; // TypeScript๋ `greeting`์ string์ผ๋ก ์ถ๋ก ํฉ๋๋ค.
let count = 123; // TypeScript๋ `count`๋ฅผ number๋ก ์ถ๋ก ํฉ๋๋ค.
function add(a: number, b: number) { // TypeScript๋ ๋ฐํ ํ์
์ number๋ก ์ถ๋ก ํฉ๋๋ค.
return a + b;
}
const numbers = [1, 2, 3]; // TypeScript๋ `numbers`๋ฅผ number[]๋ก ์ถ๋ก ํฉ๋๋ค.
๋ช ์์ ์ธ ํ์ดํ๊ณผ ์ถ๋ก ์ฌ์ด์ ์ด๋ฌํ ๊ท ํ์ ํตํด ํ์ ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ์ ๊ฐ์ฅ ์ ํฉํ ์คํ์ผ์ ์ฑํํ์ฌ ๋ช ํ์ฑ๊ณผ ํจ์จ์ฑ์ ๋ชจ๋ ์ฆ์งํ ์ ์์ต๋๋ค. ์๊ฒฉํ ์ฝ๋ฉ ํ์ค์ด ์๋ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ๋ช ์์ ์ธ ํ์ ์ ๊ฐ์ ํ ์ ์์ผ๋ฉฐ, ๋น ๋ฅธ ํ๋กํ ํ์ดํ์ด๋ ๋ ์ค์ํ ๋ด๋ถ ์คํฌ๋ฆฝํธ์ ๊ฒฝ์ฐ ์ถ๋ก ์ ํตํด ๊ฐ๋ฐ ์๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค.
์ ์ธ์ ํน์ฑ: ์๋์ ๊ณ์ฝ์ผ๋ก์์ ํ์
TypeScript ํ์ ์ ์๋์ ์ ์ธ์ ์ฌ์์ผ๋ก ์์ฉํฉ๋๋ค. ์ธํฐํ์ด์ค, ํ์ ๋ณ์นญ ๋๋ ํจ์ ์๊ทธ๋์ฒ๋ฅผ ์ ์ํ ๋, ๋ณธ์ง์ ์ผ๋ก ์์๋๋ ๋ฐ์ดํฐ ํํ ๋๋ ํจ์๊ฐ ์ด๋ป๊ฒ ๋์ํด์ผ ํ๋์ง์ ๋ํ ๊ณ์ฝ์ ์ ์ธํ๋ ๊ฒ์ ๋๋ค. ์ด ์ ์ธ์ ์ ๊ทผ ๋ฐฉ์์ ์ฝ๋๋ฅผ ๋จ์ํ ๋ช ๋ น์ด ์งํฉ์์ ํ์ ์ด ๊ธฐ๋ณธ ๋ก์ง๊ณผ ์ ์ฝ ์กฐ๊ฑด์ ์ค๋ช ํ๋ ์์ฒด ๋ฌธ์ํ ์์คํ ์ผ๋ก ๋ณํํฉ๋๋ค. ์ด๋ฌํ ํน์ฑ์ ๋ค์ํ ๊ฐ๋ฐ ํ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด๋ ๋ชจํธ์ฑ์ ์ต์ํํ๊ณ , ๊ธ๋ก๋ฒ ํ ๋ด์ ์กด์ฌํ ์ ์๋ ์์ฐ์ด ์ฅ๋ฒฝ์ ์ด์ํ์ฌ ๋ฐ์ดํฐ ๊ตฌ์กฐ ๋ฐ API๋ฅผ ์ค๋ช ํ๊ธฐ ์ํ ๋ณดํธ์ ์ธ ์ธ์ด๋ฅผ ์ ๊ณตํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
๋ก์ง ์์คํ ์ ์๋: ํต์ฌ ๊ตฌํ ์์น
TypeScript์ ํ์ ๊ฒ์ฌ๊ธฐ๋ ๋จ์ํ ์๋์ ์ธ ๊ด์ฐฐ์๊ฐ ์๋๋๋ค. ์ฝ๋์ ์ ํ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ ๊ตํ ์๊ณ ๋ฆฌ์ฆ์ ์ฌ์ฉํ๋ ๊ฐ๋ฐ ํ๋ก์ธ์ค์ ๋ฅ๋์ ์ธ ์ฐธ์ฌ์์ ๋๋ค. ์ด๋ฌํ ๋ฅ๋์ ์ธ ์ญํ ์ ๋ก์ง ์์คํ ์ ๊ธฐ๋ฐ์ ํ์ฑํฉ๋๋ค.
์ปดํ์ผ ํ์ ์ ํจ์ฑ ๊ฒ์ฌ: ์ค๋ฅ ์กฐ๊ธฐ ๋ฐ๊ฒฌ
TypeScript ๋ก์ง ์์คํ ์ ๊ฐ์ฅ ์ง์ ์ ์ธ ์ด์ ์ ํฌ๊ด์ ์ธ ์ปดํ์ผ ํ์ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ํํ ์ ์๋ค๋ ๊ฒ์ ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ค์ ๋ก ์คํ๋ ๋ ๋ฐํ์์๋ง ๋ง์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ JavaScript์ ๋ฌ๋ฆฌ, TypeScript๋ ์ปดํ์ผ ๋จ๊ณ์์ ํ์ ๊ด๋ จ ์ค๋ฅ๋ฅผ ์๋ณํฉ๋๋ค. ์ด๋ฌํ ์กฐ๊ธฐ ๊ฐ์ง๋ ํ๋ก๋์ ์ผ๋ก ์ ์ ๋๋ ๋ฒ๊ทธ ์๋ฅผ ๊ทน์ ์ผ๋ก ์ค์ฌ ๊ท์คํ ๊ฐ๋ฐ ์๊ฐ๊ณผ ์์์ ์ ์ฝํฉ๋๋ค. ๋ฐํ์ ์ค๋ฅ๊ฐ ๋ค์ํ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ๊ด๋ฒ์ํ ์ํฅ์ ๋ฏธ์น ์ ์๊ณ ์ ์ฌ์ ์ผ๋ก ๋น์ฉ์ด ๋ง์ด ๋๋ ์ฌ๋ฐฐํฌ๋ฅผ ํ์๋ก ํ ์ ์๋ ๊ธ๋ก๋ฒ ์ํํธ์จ์ด ๋ฐฐํฌ์ ๊ฒฝ์ฐ, ์ปดํ์ผ ํ์ ๊ฒ์ฌ๋ ์ค์ํ ํ์ง ๊ฒ์ดํธ์ ๋๋ค.
JavaScript์์ ๋ฐํ์ ์ค๋ฅ๊ฐ ๋ ์ ์๋ ๊ฐ๋จํ ์คํ๋ฅผ ๊ณ ๋ คํด ๋ณด์ญ์์ค:
// JavaScript (๋ฐํ์ ์ค๋ฅ)
function greet(person) {
console.log("Hello, " + person.naem); // ์คํ: 'name' ๋์ 'naem'
}
greet({ name: "Alice" }); // ํจ์ ์คํ ์ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
// TypeScript (์ปดํ์ผ ํ์ ์ค๋ฅ)
interface Person {
name: string;
}
function greetTs(person: Person) {
console.log(`Hello, ${person.naem}`); // ์ค๋ฅ: ํ์
'Person'์ 'naem' ์์ฑ์ด ์กด์ฌํ์ง ์์ต๋๋ค. 'name'์ ์๋ฏธํ์ต๋๊น?
}
greetTs({ name: "Alice" });
TypeScript ์ปดํ์ผ๋ฌ(์ข ์ข VS Code์ ๊ฐ์ IDE์ ์ง์ ํตํฉ๋จ)๊ฐ ์ ๊ณตํ๋ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ๊ฐ๋ฐ์๊ฐ ์ฝ๋๋ฅผ ์์ฑํ๋ฉด์ ๋ฌธ์ ๋ฅผ ์์ ํ ์ ์๋๋ก ํ์ฌ ํจ์จ์ฑ๊ณผ ์ ๋ฐ์ ์ธ ์ฝ๋ ํ์ง์ ํฌ๊ฒ ํฅ์์ํต๋๋ค.
์ ์ด ํ๋ฆ ๋ถ์: ๋์ ํ์ ์ขํ๊ธฐ
TypeScript ์ปดํ์ผ๋ฌ๋ ์ ์ธ๋ ํ์ ๋ง ๋ณด๋ ๊ฒ์ด ์๋๋ผ ์ฝ๋์ ์ ์ด ํ๋ฆ๋ ๋ถ์ํ์ฌ ํน์ ์ค์ฝํ ๋ด์์ ํ์ ์ ์ ์ ํ๊ฑฐ๋ "์ขํ๋๋ค". ์ด ์ ์ด ํ๋ฆ ๋ถ์์ ํตํด ์กฐ๊ฑด๋ฌธ, ๋ฃจํ ๋ฐ ๊ธฐํ ๋ ผ๋ฆฌ์ ๊ตฌ๋ฌธ์ ๊ธฐ๋ฐํ ๋งค์ฐ ์ง๋ฅ์ ์ธ ํ์ ๊ฒ์ฌ๊ฐ ๊ฐ๋ฅํฉ๋๋ค. ํ์ ๊ฐ๋์ ๊ฐ์ ๊ธฐ๋ฅ์ ์ด๋ฌํ ๊ธฐ๋ฅ์ ์ง์ ์ ์ธ ๊ฒฐ๊ณผ์ ๋๋ค.
ํ์ ๊ฐ๋: ํน์ ์ฝ๋ ๋ธ๋ก ๋ด์์ ๋ณ์์ ํ์ ์ ๋ํด TypeScript ์ปดํ์ผ๋ฌ์ ๋ ๋ง์ ์ ๋ณด๋ฅผ ์๋ ค์ฃผ๋ ํจ์ ๋๋ ์กฐ๊ฑด.
interface Bird {
fly(): void;
layEggs(): void;
}
interface Fish {
swim(): void;
layEggs(): void;
}
function isFish(pet: Fish | Bird): pet is Fish { // ํ์
๊ฐ๋ ํจ์
return (pet as Fish).swim !== undefined;
}
function getPetActivity(pet: Fish | Bird) {
if (isFish(pet)) { // TypeScript๋ ์ด ๋ธ๋ก ๋ด์์ 'pet'์ Fish๋ก ์ขํ๋๋ค.
pet.swim();
} else { // TypeScript๋ 'else' ๋ธ๋ก์์ 'pet'์ Bird๋ก ์ขํ๋๋ค.
pet.fly();
}
}
์ด๋ฌํ ๋์ ์ขํ๊ธฐ๋ ๋ค์ํ ๋ฐ์ดํฐ ์์ค๋ ์ ์ธ๊ณ ์ฌ์ฉ์ ์ ๋ ฅ๊ณผ ์ํธ ์์ฉํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ ํํ ๋ฐ์ํ๋ ๋ค์ํ ๋ฐ์ดํฐ ํํ๋ ์ํ๋ฅผ ์ฒ๋ฆฌํ๋ ๊ฒฌ๊ณ ํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ๋ฐ์๋ ๋ณต์กํ ๋น์ฆ๋์ค ๋ก์ง์ ์์ ํ๊ฒ ๋ชจ๋ธ๋งํ ์ ์์ต๋๋ค.
์ ๋์จ ๋ฐ ์ธํฐ์น์ ํ์ : ๋ก์ง ๊ฒฐํฉ
TypeScript๋ ๋ ผ๋ฆฌ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ ๊ธฐ์กด ํ์ ์ ๊ฒฐํฉํ๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค:
- ์ ๋์จ ํ์
(
|): ์ฌ๋ฌ ํ์ ์ค ํ๋๊ฐ ๋ ์ ์๋ ๊ฐ์ ๋ํ๋ ๋๋ค. ์ด๋ ๋ ผ๋ฆฌ์ OR ์ฐ์ฐ๊ณผ ๊ฐ์ต๋๋ค. ์๋ฅผ ๋ค์ด,string | number๋ ๊ฐ์ด ๋ฌธ์์ด์ด๊ฑฐ๋ ์ซ์์ผ ์ ์์์ ์๋ฏธํฉ๋๋ค. - ์ธํฐ์น์
ํ์
(
&): ์ฌ๋ฌ ํ์ ์ ๋ชจ๋ ์์ฑ์ ๋์์ ๋ง์กฑํด์ผ ํ๋ ๊ฐ์ ๋ํ๋ ๋๋ค. ์ด๋ ๋ ผ๋ฆฌ์ AND ์ฐ์ฐ๊ณผ ๊ฐ์ต๋๋ค. ์๋ฅผ ๋ค์ด,{ a: string } & { b: number }๋ ๊ฐ์ดa์์ฑ(๋ฌธ์์ด)๊ณผb์์ฑ(์ซ์)์ ๋ชจ๋ ๊ฐ์ ธ์ผ ํจ์ ์๋ฏธํฉ๋๋ค.
์ด๋ฌํ ๊ฒฐํฉ์๋ ๋ณต์กํ ์ค์ ๋ฐ์ดํฐ๋ฅผ ๋ชจ๋ธ๋งํ๋ ๋ฐ ํ์์ ์ด๋ฉฐ, ํนํ ์์ฒญ ๋งค๊ฐ๋ณ์๋ ์ค๋ฅ ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ค๋ฅธ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ๋ฐํํ ์ ์๋ API๋ฅผ ๋ค๋ฃฐ ๋ ๋์ฑ ๊ทธ๋ ์ต๋๋ค. ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ, ๋ค์ํ ๋ฐฑ์๋ ์๋น์ค ๋๋ ์๋ํํฐ ํตํฉ์์ ์ค๋ ๋ค์ํ API ์๋ต์ ์ฒ๋ฆฌํ๋ ๊ฒ์ด ์ ๋์จ ๋ฐ ์ธํฐ์น์ ํ์ ์ ์ฌ์ฉํ๋ฉด ํจ์ฌ ๋ ์์ ํ๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์์ง๋๋ค.
interface SuccessResponse {
status: 'success';
data: any;
}
interface ErrorResponse {
status: 'error';
message: string;
code: number;
}
type APIResponse = SuccessResponse | ErrorResponse;
function handleResponse(response: APIResponse) {
if (response.status === 'success') {
console.log('๋ฐ์ดํฐ ์์ :', response.data);
} else {
console.error(`์ค๋ฅ ${response.code}: ${response.message}`);
}
}
๋ฆฌํฐ๋ด ํ์ : ๊ฐ ์์ค์ ์ ํ์ฑ
TypeScript๋ ํ์
์ ์ ํํ ์์ ๊ฐ์ผ๋ก ์ง์ ํ ์ ์๋๋ก ํ์ฉํ๋๋ฐ, ์ด๋ฅผ ๋ฆฌํฐ๋ด ํ์
์ด๋ผ๊ณ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋จ์ํ string ๋์ 'pending' ๋๋ 'success'๋ก ํ์
์ ์ง์ ํ ์ ์์ต๋๋ค. ์ ๋์จ ํ์
๊ณผ ๊ฒฐํฉ๋ ๋ ๋ฆฌํฐ๋ด ํ์
์ ์ด๊ฑฐํ(enum)๊ณผ ์ ์ฌํ์ง๋ง ๋ ๋ง์ ์ ์ฐ์ฑ๊ณผ ์ข
์ข
๋ ๋์ ํ์
๊ฒ์ฌ๋ฅผ ํตํด ํ์ฉ๋๋ ๊ฐ์ ์ ํ ์งํฉ์ ์ ์ํ๋ ๋ฐ ๋ฏฟ์ ์ ์์ ๋งํผ ๊ฐ๋ ฅํด์ง๋๋ค.
type TrafficLightState = 'red' | 'yellow' | 'green';
function changeLight(state: TrafficLightState) {
// ... ์ํ์ ๋ฐ๋ฅธ ๋ก์ง ...
console.log(`์ ํธ๋ฑ์ด ์ด์ ${state}์
๋๋ค`);
}
changeLight('red'); // OK
// changeLight('blue'); // ์ค๋ฅ: '"blue"' ํ์
์ ์ธ์๋ 'TrafficLightState' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด๋ฌํ ์ ํ์ฑ์ ์๊ฒฉํ ์ํ ๊ด๋ฆฌ๋ฅผ ๊ฐ์ ํ๊ณ , ์ ์๋ ค์ง API ์์๋ฅผ ์ ์ํ๋ฉฐ, ๊ตฌ์ฑ ํ์ผ์ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ํนํ ์ฌ๋ฌ ํ์ด ๋จ์ผ ํ๋ก์ ํธ์ ๊ธฐ์ฌํ๊ณ ๋งค์ฐ ํน์ ํ ๊ฐ ์ ์ฝ ์กฐ๊ฑด์ ์ค์ํด์ผ ํ๋ ํ๊ฒฝ์์ ๋์ฑ ๊ทธ๋ ์ต๋๋ค.
๊ณ ๊ธ ํ์ ์์คํ ๊ธฐ๋ฅ: ๋ก์ง ํ์ฅ
ํต์ฌ ์์น์ ๋์ด, TypeScript๋ ํ์ ์์คํ ์ ๋จ์ํ ๊ฒ์ฌ๊ธฐ์์ ๊ฐ๋ ฅํ ๋ฉํ ํ๋ก๊ทธ๋๋ฐ ๋๊ตฌ๋ก ๊ฒฉ์์ํค๋ ์ผ๋ จ์ ๊ณ ๊ธ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ฌ ๋ณต์กํ ํ์ ๋ณํ๊ณผ ์ง์ ํ ์ ๋ค๋ฆญ ์ฝ๋๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
์ ๋ค๋ฆญ: ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ณ ํ์ ์์ ํ ์ปดํฌ๋ํธ
์ ๋ค๋ฆญ์ ์๋ง๋ ๊ฐ์ฅ ๊ทผ๋ณธ์ ์ธ ๊ณ ๊ธ ๊ธฐ๋ฅ ์ค ํ๋์ผ ๊ฒ์ ๋๋ค. ์ด๋ ํ์ ์์ ์ฑ์ ์ ์งํ๋ฉด์ ๋ค์ํ ํ์ ๊ณผ ํจ๊ป ์๋ํ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ ์์ฑ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์ ๋ค๋ฆญ์ ์ค์ ํ์ ์ ์ํ ํ๋ ์ด์คํ๋ ์ญํ ์ ํ๋ ํ์ ๋ณ์๋ฅผ ๋์ ํ์ฌ ํจ์, ํด๋์ค ๋๋ ์ธํฐํ์ด์ค๊ฐ ํ์ ์ ๋ณด๋ฅผ ํฌ์ํ์ง ์๊ณ ์ฌ๋ฌ ๋ฐ์ดํฐ ํ์ ์์ ์๋ํ ์ ์๋๋ก ํฉ๋๋ค.
function identity<T>(arg: T): T { // T๋ ํ์
๋ณ์์
๋๋ค.
return arg;
}
let output1 = identity<string>("hello"); // output1์ ํ์
์ string์
๋๋ค.
let output2 = identity<number>(123); // output2์ ํ์
์ number์
๋๋ค.
// ์ฌ๊ธฐ์์๋ ํ์
์ถ๋ก ์ด ์์ฃผ ์๋ํฉ๋๋ค:
let output3 = identity("world"); // output3์ ํ์
์ string์
๋๋ค.
์ ๋ค๋ฆญ์ ๋ค์ํ ๊ธ๋ก๋ฒ ํ๋ก์ ํธ์ ๊ฑธ์ณ ์ฑํ๋ ์ ์๋ ์ ์ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ํ๋ ์์ํฌ ๋ฐ ์ ํธ๋ฆฌํฐ ํจ์๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ์ด๋ค์ ํน์ ๋ฐ์ดํฐ ํ์ ์ ์ถ์ํํ์ฌ ๊ฐ๋ฐ์๊ฐ ๋ชจ๋ ํ์ ์ ์ ์ฉ๋๋ ๋ก์ง์ ์ง์คํ ์ ์๋๋ก ํจ์ผ๋ก์จ, ๋๊ท๋ชจ ๋ค์ค ํ ํ๋ก์ ํธ์์ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฌ๊ฒ ํฅ์์ํต๋๋ค.
๊ตญ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ์ ๋ค๋ฆญ ๋ฐ์ดํฐ ํ์นญ ํจ์๋ฅผ ๊ณ ๋ คํด ๋ณด์ญ์์ค:
interface ApiResponse<T> {
statusCode: number;
message: string;
data: T; // ์ค์ ๋ฐ์ดํฐ ํ์ด๋ก๋๋ฅผ ์ํ ์ ๋ค๋ฆญ ํ์
}
async function fetchData<T>(url: string): Promise<ApiResponse<T>> {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ์ค๋ฅ! ์ํ: ${response.status}`);
}
const result: ApiResponse<T> = await response.json();
return result;
}
// ์ฌ์ฉ์ ๋ฐ์ดํฐ ํ์นญ ์์
interface User {
id: string;
name: string;
email: string;
locale: string;
}
async function getUsers() {
try {
const userResponse = await fetchData<User[]>('/api/users');
userResponse.data.forEach(user => console.log(user.name, user.locale));
} catch (error) {
console.error('์ฌ์ฉ์ ํ์นญ ์คํจ:', error);
}
}
// ์ ํ ๋ฐ์ดํฐ ํ์นญ ์์
interface Product {
productId: string;
productName: string;
price: number;
currency: string;
}
async function getProducts() {
try {
const productResponse = await fetchData<Product[]>('/api/products');
productResponse.data.forEach(product => console.log(product.productName, product.currency));
} catch (error) {
console.error('์ ํ ํ์นญ ์คํจ:', error);
}
}
์ด ํจํด์ `T`์ ๋ฐ์ดํฐ ํ์ ์ด ๋ฌด์์ด๋ ์๊ด์์ด, `ApiResponse` ๋ํผ๊ฐ ํญ์ ๊ทธ ๊ตฌ์กฐ๋ฅผ ์ ์งํ๊ณ `data` ์์ฑ์ด ์ฌ๋ฐ๋ฅด๊ฒ ํ์ ์ด ์ง์ ๋๋๋ก ํ์ฌ, ๋ค์ํ API ํธ์ถ์์ ๋ฐํ์ ์ค๋ฅ๋ฅผ ์ค์ด๊ณ ์ฝ๋๋ฅผ ๋ ๋ช ํํ๊ฒ ๋ง๋ญ๋๋ค.
์กฐ๊ฑด๋ถ ํ์ : ์กฐ๊ฑด๋ถ ํํ์์ผ๋ก์์ ํ์
TypeScript 2.8์ ๋์
๋ ์กฐ๊ฑด๋ถ ํ์
์ ํ์
์์คํ
์ ๊ฐ๋ ฅํ ์๋ก์ด ์ฐจ์์ ๊ฐ์ ธ์, ์กฐ๊ฑด์ ๋ฐ๋ผ ํ์
์ ์ ํํ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ค์ T extends U ? X : Y ํํ๋ฅผ ์ทจํ๋ฉฐ, ์ด๋ ํ์
T๊ฐ ํ์
U์ ํ ๋น ๊ฐ๋ฅํ๋ฉด ๊ฒฐ๊ณผ ํ์
์ X์ด๊ณ , ๊ทธ๋ ์ง ์์ผ๋ฉด Y์์ ์๋ฏธํฉ๋๋ค. ์ด ๊ธฐ๋ฅ์ ์ ๊ตํ ํ์
๋ณํ์ ๊ฐ๋ฅํ๊ฒ ํ๋ฉฐ, TypeScript์ ๊ณ ๊ธ ํ์
๋ ๋ฒจ ํ๋ก๊ทธ๋๋ฐ์ ํต์ฌ ์์์
๋๋ค.
์ผ๋ถ ๋ด์ฅ ์ ํธ๋ฆฌํฐ ํ์ ์ ์กฐ๊ฑด๋ถ ํ์ ์ ํ์ฉํฉ๋๋ค:
Exclude<T, U>:T์์U์ ํ ๋น ๊ฐ๋ฅํ ํ์ ์ ์ ์ธํฉ๋๋ค.NonNullable<T>:T์์null๊ณผundefined๋ฅผ ์ ์ธํฉ๋๋ค.ReturnType<T>: ํจ์ ํ์ ์ ๋ฐํ ํ์ ์ ์ถ์ถํฉ๋๋ค.
์ฌ์ฉ์ ์ ์ ์์:
type IsString<T> = T extends string ? '๋ค, ๋ฌธ์์ด์
๋๋ค' : '์๋์, ๋ฌธ์์ด์ด ์๋๋๋ค';
type Result1 = IsString<"hello">; // Result1์ '๋ค, ๋ฌธ์์ด์
๋๋ค'
type Result2 = IsString<123>; // Result2๋ '์๋์, ๋ฌธ์์ด์ด ์๋๋๋ค'
์กฐ๊ฑด๋ถ ํ์ ์ ์ ๋ ฅ ํ์ ์ ๊ธฐ๋ฐํ์ฌ ์ ํํ ํ์ ์ ๋ณด๋ฅผ ์ ๊ณตํ ์ ์๋ ๊ณ ๋๋ก ์ ์ ๊ฐ๋ฅํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ API๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ์ค์ํ๋ฉฐ, ๊ฐ๋ฐ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํค๊ณ ๋ค์ํ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง ๋๊ท๋ชจ ์ํฐํ๋ผ์ด์ฆ ์ ํ๋ฆฌ์ผ์ด์ ์์ ํํ ๋ฐ์ํ๋ ๋ณต์กํ ์๋๋ฆฌ์ค์์ ํ์ ์ค๋ฅ์ ๊ฐ๋ฅ์ฑ์ ์ค์ฌ์ค๋๋ค.
๋งคํ๋ ํ์ : ๊ธฐ์กด ํ์ ๋ณํ
๋งคํ๋ ํ์
์ ๊ธฐ์กด ๊ฐ์ฒด ํ์
์ ์์ฑ์ ๋ณํํ์ฌ ์๋ก์ด ๊ฐ์ฒด ํ์
์ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ค์ ํ์
์ ์์ฑ์ ๋ฐ๋ณตํ๋ฉด์ ๊ฐ ์์ฑ์ ์ด๋ฆ ๋๋ ํ์
์ ๋ณํ์ ์ ์ฉํฉ๋๋ค. ๊ตฌ๋ฌธ์ ํ์
ํค์ ๋ํ `for...in`๊ณผ ์ ์ฌํ ๊ตฌ์ฑ์ ์ฌ์ฉํฉ๋๋ค: { [P in KeyType]: TransformedType }.
์ผ๋ฐ์ ์ธ ๋ด์ฅ ๋งคํ๋ ํ์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
Partial<T>:T์ ๋ชจ๋ ์์ฑ์ ์ ํ ์ฌํญ์ผ๋ก ๋ง๋ญ๋๋ค.Readonly<T>:T์ ๋ชจ๋ ์์ฑ์ ์ฝ๊ธฐ ์ ์ฉ์ผ๋ก ๋ง๋ญ๋๋ค.Pick<T, K>:T์์ ์์ฑ ์งํฉK๋ฅผ ์ ํํ์ฌ ํ์ ์ ๊ตฌ์ฑํฉ๋๋ค.Omit<T, K>:T์์ ์์ฑ ์งํฉK๋ฅผ ์๋ตํ์ฌ ํ์ ์ ๊ตฌ์ฑํฉ๋๋ค.
์ฌ์ฉ์ ์ ์ ๋งคํ๋ ํ์ ์์:
interface UserProfile {
name: string;
email: string;
age: number;
isActive: boolean;
}
type NullableProfile = {
[P in keyof UserProfile]: UserProfile[P] | null;
}; // ๋ชจ๋ ์์ฑ์ ์ ์ฌ์ ์ผ๋ก null๋ก ๋ง๋ญ๋๋ค.
const user: NullableProfile = {
name: "Jane Doe",
email: null, // ํ์ฉ๋จ
age: 30,
isActive: true
};
๋งคํ๋ ํ์ ์ DTO(Data Transfer Object) ๋ณํ, ๋ชจ๋ธ ํ์ ์์ ์ค์ ๊ฐ์ฒด ์์ฑ ๋๋ ๋ฐ์ดํฐ ๊ตฌ์กฐ์ ๊ธฐ๋ฐํ ์์ ์์ฑ๊ณผ ๊ฐ์ ์๋๋ฆฌ์ค์ ํ์์ ์ ๋๋ค. ์ด๋ค์ ๊ฐ๋ฐ์๊ฐ ์๋ก์ด ํ์ ์ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ๋์ถํ์ฌ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๊ณ ์๋์ ์ธ ํ์ ์ค๋ณต์ ์ค์ผ ์ ์๋๋ก ํ๋๋ฐ, ์ด๋ ๊ตญ์ ํ์ด ์ฌ์ฉํ๋ ๋๊ท๋ชจ์ ์งํํ๋ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ์ ์ง ๊ด๋ฆฌํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด ํ์ : ํ์ ์์ค์ ๋ฌธ์์ด ์กฐ์
TypeScript 4.1์ ๋์ ๋ ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด ํ์ ์ JavaScript์ ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด๊ณผ ์ ์ฌํ๊ฒ ํ์ ์์ค์์ ๋์ ์ธ ๋ฌธ์์ด ์กฐ์์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์ด๋ค์ ํ์ ์ด ํน์ ๋ฌธ์์ด ํจํด, ์ฐ๊ฒฐ ๋๋ ๋ณํ์ ๋ํ๋ผ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ ์ด๋ฒคํธ ์ด๋ฆ, API ์๋ํฌ์ธํธ, CSS ํด๋์ค ์ด๋ฆ ๋ฑ์ ๋ํ ๋ ์๊ฒฉํ ํ์ดํ ๊ฐ๋ฅ์ฑ์ ์ด์ด์ค๋๋ค.
type EventCategory = 'user' | 'product' | 'order';
type EventName<T extends string> = `on${Capitalize<T>}Change`;
type UserChangeEvent = EventName<EventCategory>; // 'onUserChange' | 'onProductChange' | 'onOrderChange'
function subscribe(eventName: UserChangeEvent, callback: () => void) {
console.log(`${eventName}์ ๊ตฌ๋
๋จ`);
}
subscribe('onUserChange', () => {}); // OK
// subscribe('onItemChange', () => {}); // ์ค๋ฅ: '"onItemChange"' ํ์
์ 'UserChangeEvent' ํ์
์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ๊ธฐ๋ฅ์ ๊ฐ๋ฐ์๊ฐ ํ์ ์ ํจ์ฌ ๋ ์ ํํ ์ ์ฝ ์กฐ๊ฑด์ ์ธ์ฝ๋ฉํ์ฌ, ๋ฌธ์์ด ๊ธฐ๋ฐ ์๋ณ์ ๋๋ ๊ท์น์ด ํ๋ก์ ํธ ์ ์ฒด์์ ์ค์๋๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ด๋ ๋ถ์ฐ๋ ๊ธ๋ก๋ฒ ์์คํ ์์ ๋๋ฒ๊ทธํ๊ธฐ ํนํ ์ด๋ ค์ด ๋ฒ๊ทธ์ ์ผ๋ฐ์ ์ธ ์์ธ์ธ ๋ฌธ์์ด ๋ฆฌํฐ๋ด์ ์คํ๋ก ์ธํ ๋ฏธ๋ฌํ ์ค๋ฅ๋ฅผ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
`infer` ํค์๋: ํ์ ์ถ์ถ
The infer ํค์๋๋ ์กฐ๊ฑด๋ถ ํ์
๋ด์์ ๋ค๋ฅธ ํ์
์์ ํ์
์ "์บก์ฒ"ํ๊ฑฐ๋ "์ถ์ถ"ํ ์ ์๋ ํ์
๋ณ์๋ฅผ ์ ์ธํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ์ด๋ ๊ธฐ์กด ํ์
์ ๋ถํดํ์ฌ ์๋ก์ด ํ์
์ ์์ฑํ๋ ๋ฐ ์์ฃผ ์ฌ์ฉ๋๋ฉฐ, ReturnType ๋ฐ Parameters์ ๊ฐ์ ์ ํธ๋ฆฌํฐ ํ์
์ ์ด์์ด ๋ฉ๋๋ค.
type GetArrayElementType<T> = T extends (infer ElementType)[] ? ElementType : never;
type StringArrayElement = GetArrayElementType<string[]>; // StringArrayElement์ string์
๋๋ค.
type NumberArrayElement = GetArrayElementType<number[]>; // NumberArrayElement๋ number์
๋๋ค.
type NotAnArrayElement = GetArrayElementType<string>; // NotAnArrayElement๋ never์
๋๋ค.
The `infer` ํค์๋๋ ๋ฏฟ์ ์ ์์ ์ ๋๋ก ๊ฐ๋ ฅํ ํ์ ์ธํธ๋ก์คํ์ ๋ฐ ์กฐ์์ ๊ฐ๋ฅํ๊ฒ ํ์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ์๊ฐ ๋งค์ฐ ์ ์ฐํ๊ณ ํ์ ์์ ํ API๋ฅผ ์์ฑํ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ ๋ค์ํ ์ ๋ ฅ ๋ฐ ๊ตฌ์ฑ์ ์ ์ํ ์ ์๋ ๊ฒฌ๊ณ ํ ํ์ ์ ์๋ฅผ ๊ตฌ์ถํ๋ ํต์ฌ ๊ตฌ์ฑ ์์์ด๋ฉฐ, ์ด๋ ๊ธ๋ก๋ฒ ๊ฐ๋ฐ์ ์ปค๋ฎค๋ํฐ๋ฅผ ์ํ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ฐํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
"์๋น์ค๋ก์์ ํ์ " ํจ๋ฌ๋ค์: ๊ธฐ๋ณธ ๊ฒ์ฌ๋ฅผ ๋์ด
TypeScript์ ํ์ ์์คํ ์ ๋จ์ํ ์ค๋ฅ๋ฅผ ํ์ํ๋ ๊ฒ์ ํจ์ฌ ๋์ด์ญ๋๋ค. ์ด๋ ์ ์ฒด ์ํํธ์จ์ด ๊ฐ๋ฐ ์๋ช ์ฃผ๊ธฐ๋ฅผ ํฅ์์ํค๋ "์๋น์ค๋ก์์ ํ์ " ๊ณ์ธต์ผ๋ก ์๋ํ๋ฉฐ, ๊ธ๋ก๋ฒ ํ์ ๊ท์คํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค.
๋ฆฌํฉํ ๋ง ์์ ๊ฐ: ๋๊ท๋ชจ ๋ณ๊ฒฝ ๊ฐ๋ฅ
๊ฒฌ๊ณ ํ ํ์ ์์คํ ์ ๊ฐ์ฅ ์ค์ํ ์ฅ์ ์ค ํ๋๋ ์ฝ๋ ๋ฆฌํฉํ ๋ง ์ ๊ฐ๋ฐ์์๊ฒ ์ฃผ๋ ์์ ๊ฐ์ ๋๋ค. ๋๊ท๋ชจ์ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ , ํนํ ์ฌ๋ฌ ์๊ฐ๋์ ๊ฑธ์ณ ์๋ง์ ๊ฐ๋ฐ์๊ฐ ์ ์ง๋ณด์ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ์์ ๋ง ์์ด๋ ๊ตฌ์กฐ์ ๋ณ๊ฒฝ์ ํ๋ ๊ฒ์ด ์ํํ ์ ์์ต๋๋ค. TypeScript์ ์ ์ ๋ถ์์ด ๋ฐ๋ก ๊ทธ ์์ ๋ง ์ญํ ์ ํฉ๋๋ค. ์์ฑ ์ด๋ฆ์ ๋ณ๊ฒฝํ๊ฑฐ๋, ํจ์ ์๊ทธ๋์ฒ๋ฅผ ๋ฐ๊พธ๊ฑฐ๋, ๋ชจ๋ ๊ตฌ์กฐ๋ฅผ ์ฌ๊ตฌ์ฑํ ๋ ์ปดํ์ผ๋ฌ๋ ์ฆ์ ์ํฅ์ ๋ฐ๋ ๋ชจ๋ ์์ญ์ ๊ฐ์กฐ ํ์ํ์ฌ ๋ณ๊ฒฝ ์ฌํญ์ด ์ฝ๋๋ฒ ์ด์ค ์ ์ฒด์ ์ฌ๋ฐ๋ฅด๊ฒ ์ ํ๋๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ด๋ ํ๊ท ๋์ ์ํ์ ๊ทน์ ์ผ๋ก ์ค์ด๊ณ , ๊ฐ๋ฐ์๊ฐ ๋๋ ค์ ์์ด ์ฝ๋๋ฒ ์ด์ค์ ์ํคํ ์ฒ์ ์ ์ง๋ณด์์ฑ์ ๊ฐ์ ํ ์ ์๋๋ก ํ์ ์ค์ด์ฃผ๋๋ฐ, ์ด๋ ์ฅ๊ธฐ ํ๋ก์ ํธ ๋ฐ ๊ธ๋ก๋ฒ ์ํํธ์จ์ด ์ ํ์ ์์ด ์ค์ํ ์์์ ๋๋ค.
ํฅ์๋ ๊ฐ๋ฐ์ ๊ฒฝํ(DX): ๋ณดํธ์ ์ธ ์ธ์ด
TypeScript๋ฅผ ์ธ์ํ๋ IDE(์: VS Code)๊ฐ ์ ๊ณตํ๋ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ, ์ง๋ฅํ ์๋ ์์ฑ, ์ธ๋ผ์ธ ๋ฌธ์ ๋ฐ ์ค๋ฅ ์ ์์ ๊ฐ๋ฐ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํต๋๋ค. ๊ฐ๋ฐ์๋ ๋ฌธ์ ์กฐํ๋ API ๊ณ์ฝ ์ถ์ธก์ ์๊ฐ์ ๋ ์ฐ๊ณ ์ค์ ๊ธฐ๋ฅ์ ์์ฑํ๋ ๋ฐ ๋ ๋ง์ ์๊ฐ์ ํ ์ ํฉ๋๋ค. ์ด๋ฌํ ํฅ์๋ DX๋ ์๋ จ๋ ๊ฐ๋ฐ์์๊ฒ๋ง ๊ตญํ๋์ง ์์ต๋๋ค. ์๋ก์ด ํ์๋ค์๊ฒ๋ ํฐ ์ด์ ์ ์ ๊ณตํ์ฌ, ์ต์ํ์ง ์์ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ๋น ๋ฅด๊ฒ ์ดํดํ๊ณ ํจ๊ณผ์ ์ผ๋ก ๊ธฐ์ฌํ ์ ์๋๋ก ํฉ๋๋ค. ๋ค์ํ ๊ฒฝํ ์์ค๊ณผ ์ธ์ด์ ๋ฐฐ๊ฒฝ์ ๊ฐ์ง ๊ธ๋ก๋ฒ ํ์๊ฒ TypeScript ํ์ ์ ๋ณด์ ์ผ๊ด๋๊ณ ๋ช ์์ ์ธ ํน์ฑ์ ๋ณดํธ์ ์ธ ์ธ์ด ์ญํ ์ ํ์ฌ ์์ฌ์ํต ์ค๋ฅ๋ฅผ ์ค์ด๊ณ ์จ๋ณด๋ฉ ์๋๋ฅผ ๋์ ๋๋ค.
ํ์ ์ ํตํ ๋ฌธ์ํ: ์ด์์๋ ๊ณ์ฝ
TypeScript ํ์
์ API ๋ฐ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์ํ ์ด์์๋ ์คํ ๊ฐ๋ฅํ ๋ฌธ์ ์ญํ ์ ํฉ๋๋ค. ์ค๋๋ ์ ์๋ ์ธ๋ถ ๋ฌธ์์ ๋ฌ๋ฆฌ, ํ์
์ ์ฝ๋์ ํ์์ ์ธ ๋ถ๋ถ์ด๋ฉฐ ์ปดํ์ผ๋ฌ์ ์ํด ๊ฐ์ ๋ฉ๋๋ค. interface User { id: string; name: string; email: string; locale: string; }์ ๊ฐ์ ์ธํฐํ์ด์ค๋ ์ฌ์ฉ์ ๊ฐ์ฒด์ ์์ ๊ตฌ์กฐ๋ฅผ ์ฆ์ ์ ๋ฌํฉ๋๋ค. ์ด ๋ด์ฌ๋ ๋ฌธ์ํ๋ ํนํ ๋ค๋ฅธ ํ์ด ๊ฐ๋ฐํ ์ปดํฌ๋ํธ๋ฅผ ํตํฉํ๊ฑฐ๋ ์ธ๋ถ API๋ฅผ ์๋นํ ๋ ๋ชจํธ์ฑ์ ์ค์
๋๋ค. ์ด๋ ๊ตฌํ ์ ์ ๋ฐ์ดํฐ ๊ตฌ์กฐ์ ํจ์ ์๊ทธ๋์ฒ๊ฐ ๋ช
ํํ๊ฒ ์ ์๋๋ ๊ณ์ฝ ์ฐ์ ๊ฐ๋ฐ ์ ๊ทผ ๋ฐฉ์์ ์ด์งํ์ฌ ๊ธ๋ก๋ฒ ๊ฐ๋ฐ ํ์ดํ๋ผ์ธ ์ ๋ฐ์ ๊ฑธ์ณ ๋ ์์ธก ๊ฐ๋ฅํ๊ณ ๊ฒฌ๊ณ ํ ํตํฉ์ ์ด๋์ด๋
๋๋ค.
๊ธ๋ก๋ฒ ํ์ ์ํ ์ฒ ํ์ ๊ณ ๋ ค ์ฌํญ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
TypeScript์ ๋ก์ง ์์คํ ์ ์ต๋ํ ํ์ฉํ๊ธฐ ์ํด ๊ธ๋ก๋ฒ ํ์ ํน์ ์ฒ ํ์ ์ ๊ทผ ๋ฐฉ์๊ณผ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ฑํํด์ผ ํฉ๋๋ค.
์๊ฒฉํจ๊ณผ ์ ์ฐ์ฑ์ ๊ท ํ: ์ ๋ต์ ์ธ ํ์ ์ฌ์ฉ
TypeScript๋ ์๊ฒฉํ ํ์ดํ์ ์ฅ๋ คํ์ง๋ง, ํ์ํ ๋ ์ ์ฐ์ฑ์ ์ํ ๋๊ตฌ๋ ์ ๊ณตํฉ๋๋ค:
any: "๋น์๊ตฌ" โ ๋๋ฌผ๊ฒ ๊ทธ๋ฆฌ๊ณ ๊ทน๋๋ก ์ฃผ์ํ์ฌ ์ฌ์ฉํ์ญ์์ค. ์ด๋ ๋ณธ์ง์ ์ผ๋ก ๋ณ์์ ๋ํ ํ์ ๊ฒ์ฌ๋ฅผ ๋นํ์ฑํํ๋ฉฐ, ํ์ ์ด ์ง์ ๋์ง ์์ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋น ๋ฅด๊ฒ ํตํฉํ๋ ๋ฐ ์ ์ฉํ ์ ์์ง๋ง, ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ๋ ์์ ํ ํ์ ์ผ๋ก ๋ฆฌํฉํ ๋ง๋์ด์ผ ํฉ๋๋ค.unknown:any์ ๋ ์์ ํ ๋์.unknownํ์ ์ ๋ณ์๋ ์ฌ์ฉ๋๊ธฐ ์ ์ ํ์ ๊ฒ์ฌ๋ฅผ ๋ฐ๊ฑฐ๋ ๋จ์ธ๋์ด์ผ ํ๋ฉฐ, ์๋์น ์์ ์ํํ ์์ ์ ๋ฐฉ์งํฉ๋๋ค. ์ด๋ ์์์น ๋ชปํ ํํ๋ฅผ ํฌํจํ ์ ์๋ ์ธ๋ถ์ ์ ๋ขฐํ ์ ์๋ ์์ค(์: ๋คํธ์ํฌ ์์ฒญ์์ JSON ํ์ฑ)์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ํ์ํฉ๋๋ค.never: ๋ฌธ์ ๊ทธ๋๋ก ์ ๋ ๋ฐ์ํด์๋ ์ ๋๋ ํ์ ์ ๋ํ๋ ๋๋ค. ์ด๋ ์ ๋์จ ํ์ ์ ์ฒ ์ ํ ๊ฒ์ฌ ๋๋ ์ค๋ฅ๋ฅผ ๋ฐ์์ํค๊ฑฐ๋ ์ ๋ ๋ฐํํ์ง ์๋ ํจ์์ ํ์ ์ ์ง์ ํ๋ ๋ฐ ์์ฃผ ์ฌ์ฉ๋ฉ๋๋ค.
์ด๋ฌํ ํ์ ์ ์ ๋ต์ ์ฌ์ฉ์ ํ์ ์์คํ ์ด ๊ฐ๋ฐ์ ๋ฐฉํดํ๊ธฐ๋ณด๋ค๋ ๋๋๋ก ๋ณด์ฅํ๋ฉฐ, ํนํ ์ธ๋ถ ๋ฐ์ดํฐ์ ์์ธก ๋ถ๊ฐ๋ฅํ ํน์ฑ์ ๋ค๋ฃจ๊ฑฐ๋ ์ค๋๋, ํ์ ์ด ์ง์ ๋์ง ์์ ์ฝ๋๋ฒ ์ด์ค์ ํตํฉํ ๋ ๋์ฑ ๊ทธ๋ ์ต๋๋ค. ์ด๋ ๋๊ท๋ชจ ๊ธ๋ก๋ฒ ์ํํธ์จ์ด ํ๋ก์ ํธ์์ ํํ ๋ฐ์ํ๋ ๊ณผ์ ์ ๋๋ค.
ํ์ ๊ธฐ๋ฐ ๊ฐ๋ฐ: ํ์ ์ฐ์ ์ค๊ณ
ํ์ ๊ธฐ๋ฐ ๊ฐ๋ฐ ์ ๊ทผ ๋ฐฉ์์ ์ฑํํ๋ค๋ ๊ฒ์ ๊ตฌํ ๋ก์ง์ ์์ฑํ๊ธฐ ์ ์ TypeScript ํ์ ์ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ ๊ตฌ์กฐ์ API ๊ณ์ฝ์ ์ ์ํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ด๋ ์์คํ ์ ๋ค์ํ ๋ถ๋ถ(ํ๋ฐํธ์๋, ๋ฐฑ์๋, ์๋ํํฐ ์๋น์ค) ๊ฐ์ ํต์ ์ด ๋ช ํํ๊ฒ ์ ์๋๋ ๋ช ํํ ์ค๊ณ ๋จ๊ณ๋ฅผ ์ด์งํฉ๋๋ค. ์ด ๊ณ์ฝ ์ฐ์ ์ ๊ทผ ๋ฐฉ์์ ๋ ์ ์ค๊ณ๋๊ณ , ๋ ๋ชจ๋ํ๋๋ฉฐ, ๋ ๊ฒฌ๊ณ ํ ์์คํ ์ผ๋ก ์ด์ด์ง๋๋ค. ๋ํ ๋ถ์ฐ๋ ํ ๊ฐ์ ํ๋ฅญํ ์์ฌ์ํต ๋๊ตฌ ์ญํ ์ ํ์ฌ ๋ชจ๋ ์ฌ๋์ด ๋์ผํ๊ณ ๋ช ํํ๊ฒ ์ ์๋ ๊ธฐ๋์น์ ๋ฐ๋ผ ์์ ํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
๋๊ตฌ ๋ฐ ์ํ๊ณ: ๊ตญ๊ฒฝ์ ์ด์ํ ์ผ๊ด์ฑ
TypeScript ๊ฒฝํ์ ํ๋ถํ ๋๊ตฌ ์ํ๊ณ์ ์ํด ํฌ๊ฒ ํฅ์๋ฉ๋๋ค. Visual Studio Code์ ๊ฐ์ IDE๋ ์ค์๊ฐ ์ค๋ฅ ๊ฒ์ฌ, ๋ฆฌํฉํ ๋ง ๊ธฐ๋ฅ ๋ฐ ์ง๋ฅํ ์ฝ๋ ์์ฑ์ ์ ๊ณตํ์ฌ TypeScript์ ๋ํ ํ์ํ ์ง์์ ์ ๊ณตํฉ๋๋ค. ๋ฆฐํ ๋๊ตฌ(TypeScript ํ๋ฌ๊ทธ์ธ์ด ์๋ ESLint ๋ฑ) ๋ฐ ์ฝ๋ ํฌ๋งคํฐ(Prettier ๋ฑ)๋ฅผ ๊ฐ๋ฐ ์ํฌํ๋ก์ ํตํฉํ๋ฉด ๊ฐ์ธ์ ์ธ ์ ํธ๋๋ ์ง์ญ์ ์ฝ๋ฉ ๊ท์น์ ๊ด๊ณ์์ด ๋ค์ํ ํ ๊ฐ์ ์ผ๊ด๋ ์ฝ๋ ์คํ์ผ๊ณผ ํ์ง์ ๋ณด์ฅํฉ๋๋ค. ๋ํ, TypeScript ์ปดํ์ผ์ ์ง์์ ํตํฉ/์ง์์ ๋ฐฐํฌ(CI/CD) ํ์ดํ๋ผ์ธ์ ํตํฉํ๋ฉด ์ฝ๋๊ฐ ๋ฐฐํฌ๋๊ธฐ ์ ์ ํ์ ์ค๋ฅ๊ฐ ์๋์ผ๋ก ๊ฐ์ง๋์ด ์ ์ธ๊ณ์ ์ผ๋ก ๋ฐฐํฌ๋๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ํ ๋์ ํ์ง ํ์ค์ ์ ์งํฉ๋๋ค.
๊ต์ก ๋ฐ ์จ๋ณด๋ฉ: ๊ธ๋ก๋ฒ ์ธ์ฌ ์ญ๋ ๊ฐํ
๊ธ๋ก๋ฒ ์กฐ์ง์ ๊ฒฝ์ฐ, ํนํ ์์ JavaScript ๋ฐฐ๊ฒฝ์์ ์ ํํ๋ ์ ๊ท ๊ฐ๋ฐ์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์จ๋ณด๋ฉํ๋ ค๋ฉด TypeScript์ ํ์ ๋ก์ง์ ๋ํ ๋ช ํํ ๊ต์ก ์ ๋ต์ด ํ์ํฉ๋๋ค. ํฌ๊ด์ ์ธ ๋ฌธ์, ๊ณต์ ์์, ๋ค์ํ ๊ธฐ์ ์์ค์ ๋ง์ถฐ์ง ๊ต์ก ์ธ์ ์ ์ ๊ณตํ๋ฉด ํ์ต ๊ณก์ ์ ํฌ๊ฒ ์ค์ผ ์ ์์ต๋๋ค. ๋ช ์์ ์ผ๋ก ํ์ ์ ์ง์ ํด์ผ ํ ๋, ์ถ๋ก ์ ์์กดํด์ผ ํ ๋, ๊ณ ๊ธ ๊ธฐ๋ฅ์ ํ์ฉํ๋ ๋ฐฉ๋ฒ ๋ฑ ํ์ ์ฌ์ฉ์ ๋ํ ๋ช ํํ ์ง์นจ์ ์๋ฆฝํ๋ ๊ฒ์ ๋ชจ๋ ๊ฐ๋ฐ ํ์์ ์ง๋ฆฌ์ ์์น๋ ์ด์ ๊ฒฝํ์ ๊ด๊ณ์์ด ํ์ ์์คํ ์ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๊ณ ์ด์ ์ ๊ทน๋ํํฉ๋๋ค.
๊ฒฐ๋ก : ๋ฏธ๋ ์งํฅ์ ์ธ ์ํํธ์จ์ด๋ฅผ ์ํ ํ์ ๋ก์ง ์์ฉ
TypeScript์ ํ์ ์์คํ ์ ๋จ์ํ ์ ์ ๊ฒ์ฌ๊ธฐ๋ฅผ ํจ์ฌ ๋ฐ์ด๋์ด, ๊ฐ๋ฐ์๊ฐ ์ํํธ์จ์ด๋ฅผ ๊ตฌ์ํ๊ณ ๊ตฌ์ถํ๋ฉฐ ์ ์ง ๊ด๋ฆฌํ๋ ๋ฐฉ์์ ๊ทผ๋ณธ์ ์ผ๋ก ๋ณํ์ํค๋ ์ ๊ตํ ๋ก์ง ์์คํ ์ ๋๋ค. ๋ณต์กํ ๊ด๊ณ์ ์ ์ฝ ์กฐ๊ฑด์ ์ฝ๋์ ์ง์ ์ธ์ฝ๋ฉํจ์ผ๋ก์จ, ์ ๋ก ์๋ ์์ค์ ์ ๋ขฐ๋ฅผ ์ ๊ณตํ๊ณ , ๊ฒฌ๊ณ ํ ๋ฆฌํฉํ ๋ง์ ๊ฐ๋ฅํ๊ฒ ํ๋ฉฐ, ๊ฐ๋ฐ์ ๊ฒฝํ์ ๊ทน์ ์ผ๋ก ํฅ์์ํต๋๋ค.
๊ตญ์ ํ๊ณผ ๊ธ๋ก๋ฒ ์ํํธ์จ์ด ๊ฐ๋ฐ์ ์์ด ๊ทธ ์๋ฏธ๋ ์ฌ์คํฉ๋๋ค. TypeScript๋ ์ฝ๋๋ฅผ ์ค๋ช ํ๊ธฐ ์ํ ๊ณตํต์ ์ด๊ณ ๋ชจํธํ์ง ์์ ์ธ์ด๋ฅผ ์ ๊ณตํ์ฌ, ๋ค์ํ ๋ฌธํ์ ๋ฐ ์ธ์ด์ ๋ฐฐ๊ฒฝ์ ๋์ด์ ์ํํ ํ์ ์ ์ด์งํฉ๋๋ค. ์ค๋ฅ๋ฅผ ์กฐ๊ธฐ์ ๊ฐ์งํ๊ณ , API ์ผ๊ด์ฑ์ ๋ณด์ฅํ๋ฉฐ, ๊ณ ๋๋ก ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ ์์ฑ์ ์ฉ์ดํ๊ฒ ํ๋ ๋ฅ๋ ฅ์ ํ์ฅ ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ๋ฉฐ ์ง์ ์ผ๋ก ๋ฏธ๋ ์งํฅ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ์ฌ ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑ์ํค๋ ๋ฐ ํ์์ ์ธ ๋๊ตฌ์ ๋๋ค.
TypeScript ํ์ ๊ตฌํ์ ์ฒ ํ์ ์์ฉํ๊ณ ๊ทธ ๊ธฐ๋ฅ์ ์ฑ์คํ๊ฒ ์ ์ฉํ๋ ๊ฒ์ ๋จ์ํ ํ์ ์ด ์๋ JavaScript๋ฅผ ์์ฑํ๋ ๊ฒ์ ๋์ด์ญ๋๋ค. ์ด๋ ์ํํธ์จ์ด ์์ง๋์ด๋ง์ ๋ํ ๋ณด๋ค ๊ท์จ์ ์ด๊ณ ์ ์ธ์ ์ด๋ฉฐ ๊ถ๊ทน์ ์ผ๋ก ์์ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ์ฑํํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ํํธ์จ์ด์ ์ธ๊ณ๊ฐ ๋ณต์ก์ฑ๊ณผ ์ํธ ์ฐ๊ฒฐ์ฑ ๋ฉด์์ ๊ณ์ ์ฑ์ฅํจ์ ๋ฐ๋ผ, TypeScript ๋ก์ง ์์คํ ์ ๋ํ ๊น์ ์ดํด์ ์ ์ฉ์ ์ฑ๊ณต์ ์ด์์ด ๋ ๊ฒ์ด๋ฉฐ, ์ ์ธ๊ณ ๊ฐ๋ฐ์๋ค์ด ๋ค์ ์ธ๋์ ๊ฒฌ๊ณ ํ๊ณ ์ ๋ขฐํ ์ ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์๋๋ก ์ง์ํ ๊ฒ์ ๋๋ค.